<!DOCTYPE html>
<html lang="en">
<!--<head>
    <meta charset="utf-8">
    <title>tab切换</title>
    <style type="text/css">
        *{padding:0;margin:0;font:normal 15px "微软雅黑";color:#000;}
        ul{list-style-type: none;padding-left: 5px;margin-bottom: -2px}
        .tab{width:500px;margin: 10px auto}
        a{text-decoration: none;}
        .title li{display: inline-block;border: 1px solid #999;border-bottom: 2px solid #a00;background: #fff;text-align: center;width: 60px;height: 30px;margin: 0 1px;line-height: 30px}
        .title .active{border-top:2px solid #a00;border-bottom: 2px solid #fff; }
        #content{margin: 0;border: 1px solid #ccc;border-top: 2px solid #a00;width: 300px}
        #content div{display: none;padding: 10px 0}
        #content .mod{display: block;}
    </style>
</head>-->


<script type="text/javascript" src="js/jquery-3.4.1.min.js"></script>
<script type="text/javascript">
    $(function() {
        $(".tab2 li").click(function() {
            //            var $this=$(this);
            //            alert($this.index());
            $(this).addClass("active").siblings().removeClass("active");
            $("#content .mod").eq($(".tab2 li").index(this)).show().siblings("#content .mod").hide();
        });
    });
</script>

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>我的众筹</title>
    <link rel="stylesheet" href="css/style.css">
    <link rel="stylesheet" href="css/top.css">

</head>
<script src="js/jquery-3.4.1.min.js">
    $(function () {
        $.get("/portal/username.do",function (data) {
            let username = data.username;
            if(username){
                $("#registerSpan").before("<span>" + username + "<a href='/logout/cas'>退出登录</a></span>")
            }else {
                $("#registerSpan").before("<span><a href='/login.html'>登录</a></span>")
            }
        })
    })
</script>
<body>
    <!--顶部导航-->
    <div class="headr">
        <div class="top-box">
            <div>
                <div class="l">
                    &nbsp;&nbsp;&nbsp;创点新意
                </div>

                <div class="c">
                    <a href="#">搜索</a>&nbsp;|&nbsp;&nbsp;
                </div>

                <div class="rt">
                    <input type="text" placeholder="请输入搜索内容" class="search">
                </div>

                <div class="rl">
                    <span></span>
                    <a href="myHome.html">我的众筹(<span>3</span>)</a>&nbsp;|&nbsp;&nbsp; &nbsp;
                    <a href="/login.html">登录</a>&nbsp;&nbsp;|&nbsp;&nbsp;
                    <a href="register.html">免费注册</a>
                </div>
            </div>
        </div>
    </div>

    <div class="container">
        <div>
            <ul class="tab2">
                <li class="item1 active"><a href="#" style="color: #434343;font-family: 微軟正黑體">我支持的众筹</a></li>
                <li class="item1"><a href="#" style="color: #434343;font-family: 微軟正黑體">我发起的众筹</a></li>
                <li class="item1"><a href="#" style="color: #434343;font-family: 微軟正黑體">我的收藏</a></li>
                <!--<li><a href="#">家居</a></li>-->
            </ul>
        </div>
    </div>

    <!-- 往下面添加内容 -->
    <div class="tab1">
        <div class="block">
            <div id="content">
                <div class="mod">
                    <!-- <a href='#' style="color: #434343;"> 用于接收教育平台和课程的邮件通知，非常重要</a> -->
                    <div class="screen">
                        <div class="screen-time">
                            <span class="active margin_right20">按发起时间排序</span>
                            <span>按加入时间排序</span>
                        </div>
                        <div class="screen-type">
                            <span class='active margin_right20'>全部</span>
                            <span>已过期</span>
                        </div>
                    </div>
                    <ul class="goods-list">
                        <li class="goods-item">
                            <div class="goods-img">
                                <img src="./img/1.png" alt="">
                            </div>
                            <div class="goods-title">挚爱神仙水</div>
                            <div class='goods_mes'>
                                <span>关注:<span>22</span></span>
                                <span>支持:<span>22</span></span>
                                <span>剩余:<span>22</span></span>
                            </div>
                            <div class="goods-progress">
                                  <!--进度条容器-->
                                    <div id="progressbar">
                                    <!--用来模仿进度条推进效果的进度条元素-->
                                        <div id="fill"></div>
                                    </div>
                                <span class="tip">众筹中</span>
                            </div>
                            <div class="goods-result">
                                <div>已筹集:<span>¥13454</span></div>
                                <div>达成:<span>45%</span></div>
                            </div>
                        </li>
                    </ul>

                </div>
                <div class="mod" style="display: none">
                    <div class="screen">
                        <div class="screen-time">
                            <span class='active margin_right20'>按发起时间排序</span>
                            <span>按加入时间排序</span>
                        </div>
                        <div class="screen-type">
                            <span class='active margin_right20'>全部</span>
                            <span>已过期</span>
                        </div>
                    </div>
                    <ul class="goods-list">
                        <li class="goods-item">
                            <div class="goods-img">
                                <img src="./img/3.png" alt="">
                            </div>
                            <div class="goods-title margin-bottom30">罗永浩的演讲之道</div>
                            <div class="goods-progress">
                                <!--进度条容器-->
                                  <div id="progressbar">
                                  <!--用来模仿进度条推进效果的进度条元素-->
                                      <div id="fill"></div>
                                  </div>
                          </div>
                          <div class='goods-target'>完成众筹目标<span>2/8</span></div>
                        </li>
                        <li class="goods-item">
                            <div class="goods-img">
                                <img src="./img/3.png" alt="">
                            </div>
                            <div class="goods-title margin-bottom30">罗永浩的演讲之道</div>
                            <div class="goods-progress">
                                <!--进度条容器-->
                                  <div id="progressbar">
                                  <!--用来模仿进度条推进效果的进度条元素-->
                                      <div id="fill"></div>
                                  </div>
                          </div>
                          <div class='goods-target'>完成众筹目标<span>2/8</span></div>
                        </li>
                    </ul>
                </div>
                <div class="mod" style="display: none">
                    <div class="screen">
                        <div class="screen-time">
                            <span class="active margin_right20">按发起时间排序</span>
                            <span>按加入时间排序</span>
                        </div>
                        <div class="screen-type">
                            <span class="active margin_right20">全部</span>
                            <span>已过期</span>
                        </div>
                    </div>
                    <ul class="goods-list">
                        <li class="goods-item">
                            <div class="goods-img">
                                <img src="./img/3.png" alt="">
                            </div>
                            <div class="goods-title margin-bottom30">罗永浩的演讲之道</div>
                            <div class="goods-progress">
                                <!--进度条容器-->
                                  <div id="progressbar">
                                  <!--用来模仿进度条推进效果的进度条元素-->
                                      <div id="fill"></div>
                                  </div>
                          </div>
                          <div class='goods-target'>完成众筹目标<span>2/8</span></div>
                        </li>
                        <li class="goods-item">
                            <div class="goods-img">
                                <img src="./img/3.png" alt="">
                            </div>
                            <div class="goods-title margin-bottom30">罗永浩的演讲之道</div>
                            <div class="goods-progress">
                                <!--进度条容器-->
                                  <div id="progressbar">
                                  <!--用来模仿进度条推进效果的进度条元素-->
                                      <div id="fill"></div>
                                  </div>

                          </div>
                          <div class='goods-target'>完成众筹目标<span>2/8</span></div>
                        </li>
                        <li class="goods-item">
                            <div class="goods-img">
                                <img src="./img/3.png" alt="">
                            </div>
                            <div class="goods-title margin-bottom30">罗永浩的演讲之道</div>
                            <div class="goods-progress">
                                <!--进度条容器-->
                                  <div id="progressbar">
                                  <!--用来模仿进度条推进效果的进度条元素-->
                                      <div id="fill"></div>
                                  </div>
                          </div>
                          <div class='goods-target'>完成众筹目标<span>2/8</span></div>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
    </div>

</body>

</html>